<template>
  <div id="app">
    <FormDesign ref="vfDesignerRef" :global-dsv="globalDsv" :designer-config="designerConfig" :form-data-selected="formDataSelected" :form-data-all="formDataAll" :key="formKey">
      
      <!-- <template #customToolButtons>
        <el-button type="text" @click="doTest">获取模版数据</el-button>
      </template> -->
     
    </FormDesign>
  </div>
</template>

<script>
import FormDesign from './components/form-designer/index.vue'
import { jsonData } from '@/assets/template.js'

/**
 * 开发组件调试
 * import FormDesign from './components/form-designer/index.vue'
 * components: {
    // FormDesign,
  },
 */

 /**
  * 打包之后的npm包测试
  * 在main.ts中
  * import * as efDesigin from '../npm'
  * app.use(efDesign.default) 
  * 注释掉组件调试的代码
  * // import FormDesign from './components/form-designer/index.vue'
  * components: {
    // FormDesign,
  },
  */


export default {
  name: 'App',
  components: {
    FormDesign,
  },
  data() {
    return {
      formKey: 0,
      formDataSelected: {},
      formDataAll: [],
      designerConfig: {
        type: Object,
        default: () => {
          return {
            languageMenu: true,  //是否显示语言切换菜单
            externalLink: true,  //是否显示GitHub、文档等外部链接
            formTemplates: true,  //是否显示表单模板
            eventCollapse: true,  //是否显示组件事件属性折叠面板
            widgetNameReadonly: false,  //禁止修改组件名称
            clearDesignerButton: true,  //是否显示清空设计器按钮
            previewFormButton: true,  //是否显示预览表单按钮
            importJsonButton: true,  //是否显示导入JSON按钮
            exportJsonButton: true,  //是否显示导出JSON器按钮
            exportCodeButton: true,  //是否显示导出代码按钮
            generateSFCButton: true,  //是否显示生成SFC按钮
            toolbarMaxWidth: 420,  //设计器工具按钮栏最大宽度（单位像素）
            toolbarMinWidth: 300,  //设计器工具按钮栏最小宽度（单位像素）
            presetCssCode: '',  //设计器预设CSS样式代码
            resetFormJson: false,  //是否在设计器初始化时将表单内容还原为空
          }
        }
      },
      /* 全局数据源变量 */
      globalDsv: {
        type: Object,
        default: () => ({})
      },
      //全局数据源变量
      globalDsv: {
        testApiHost: 'http://www.test.com/api',
        testPort: 8080,
      },

    }
  },
  computed: {
    //
  },
  mounted(){
    this.initData();
  },
  methods: {
    doTest() {
      // let fieldList = this.$refs.vfDesignerRef.getFieldWidgets(null, true)
      console.log('test', this.$refs.vfDesignerRef.getFormJson())
    },
    initData(){
      //模拟初始化的数据
      let parentTemplate = JSON.parse(JSON.stringify(jsonData));
      console.log('数据模版的数据：----------', parentTemplate)
      this.formDataSelected = parentTemplate;
      this.formDataAll = this.getFormDataAllList(parentTemplate.widgetList) // 全部选项
      this.formKey = 1;

    },
    getPageList (list) {
      list.forEach((item, index) => {
        if (item.label === "PAGE_LAYOUT" && item.type === "SELECTED") {
          this.formDataSelected = JSON.parse(item.sourceCode);
        }
      });
    },
    getFormDataAllList (list) {  // 展开已选项，显示 list
      let arr2New = []
      list.map((item) => {
        if (!item.cols) { // 不在栅格里面，没有 cols 属性，如果是分割线，不放到已选项
          // arr2New.push(itemcol)
        } else {
          item.cols.map(itemcol => {
            if (itemcol.widgetList.length > 0) {
              arr2New.push(itemcol.widgetList[0])
            }
          })
        }
      })
      return arr2New
    },
  }
}
</script>

<style lang="scss">
  #app {
    height: 100%;
  }
</style>
